<template>
	<view>
		<view class="ld">
				<view class="left">
					<view
					 v-for="(item, index) in classify" :key="index"
					 @click="setId(index)" 
					  :class="{active:index==currentNum}" 
					 >
					 {{ item.title }}
					 </view>
				</view>
				<view class="right">
					<!-- 级联 scroll-into-view 是一个id-->
					<!-- scroll-with-animation	切换动画滑动 -->
					<scroll-view 
					class="scroll-view"
					:scroll-into-view="clickId" 
					scroll-y="true" 
					style="width: 100%; height: 100%;"
					scroll-with-animation	
					@scroll="scroll"
					@scrolltolower="scrolltolower"
					@scrolltoupper="scrolltoupper"
					>
						<view v-for="(item, index) in classify" :key="index" class="list">
							<view class="title2" :id="'po' + index" >
							{{ item.title }}:
							</view >
							<view class="list1">
								<view class="item" v-for="(it, idx) in item.imglist" :key="idx">
									<image :src="it.img" style="width: 140rpx;height:140rpx ;"></image>
									<text class="item-text">{{it.title2}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import Api from '../../Api.js';
	export default {
		data() {
			return {
				classify:[],
				clickId: '',
				currentNum:0,
				topList:[]
			}
		},
		onLoad(){
			this.classify=Api.classify;
				console.log(this.classify)
		},
		//页面初始化生命周期
		onReady(){
			this.getNodesInfo()
		},
		methods: {
			setId(index) {
				this.clickId = 'po' + index;
				this.currentNum=index;
					console.log(this.currentNum)
			}
			,
			scroll(e){
				// console.log(e.target.scrollTop)
				let scrollTop=e.target.scrollTop;
				for( let i=0;i<this.topList.length;i++){
					let h1=this.topList[i];
					let h2=this.topList[i+1];
					if(scrollTop>h1&&scrollTop<h2){
						this.currentNum=i+1;
						console.log(this.currentNum)
					}
				}
			},
			//滚动到顶部
			scrolltoupper(){
				setTimeout(()=>{
							this.currentNum=0;
				},80)	
			},
			// 滚动到底部
			scrolltolower(){
				setTimeout(()=>{
							this.currentNum=this.classify.length-1;
				},80)		
			},		
			// 获取dom  并操作
			getNodesInfo(){
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.list1').boundingClientRect().exec(res=>{
					//拿到top值  坑:
					console.log(res);
					let nodes=res[0];
					let rel=[];
					nodes.map(item=>{
						rel.push(item.top)
					})
					// console.log(rel)
					this.topList=rel;
				})
			}
		}
	}
</script>

<style lang="scss">
.ld {
	width: 100%;
	display: flex;
	.left {
		width: 25%;
		background-color: #fff;
		view{
			width: 100%;
			height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #606266;
			line-height:100rpx ;
		}
	}
	.right {
		width: 75%;
		height: 1000rpx;
		.scroll-view{
			width: 100%;
			height: 100%;
			overflow: hidden;
			.list{
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-bottom: 150rpx ;
				.title2 {
					height: 70rpx;
					line-height: 70rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					font-size: 35rpx;
					font-weight: bold;
				}
				.list1{
					display: flex;
					justify-content: space-start;
					flex-wrap: wrap;
					width: 100%;
					height: 400rpx;
				.item{
					display: flex;
					flex-direction: column;
					width: 140rpx;
					height: 213rpx;
					margin-bottom:30rpx ;
					image{
						width: 140rpx;
						height: 10rpx;
					}
					.item-text{
						text-align: center;
						font-size: 20rpx;
						color: #3F536E;
					}
					}
				}		
		}
	}
}
}
.active{
	color: #fa436a!important;
	background: #f8f8f8 !important;
}
</style>
